<!--
 * @Description: 待办列表
 * @Author: qingyang
 * @Date: 2023-06-07 11:37:19
 * @LastEditors: qingyang
 * @LastEditTime: 2023-06-13 16:25:13
-->
<template>
  <div class="todo-wrap">
    <CPageTable @register="registerPage" v-model:searchForm="searchForm">
      <template #businessKeySlot="{ scope }">
        <CTableColumn
          :main-text="`${scope.row.businessName} - ${scope.row.processInstanceTitle}`"
          :sub-text="scope.row.businessKey"
          isLink
          @click="handleClick(scope.row)"
        >
          <template #mainTextIcon>
            <img
              v-if="scope.row.processDefinitionKey === 'SUPPLIER_FORM_APPROVAL'"
              class="icon-style"
              src="@/assets/images/todo_icon_02.png"
            />
            <img v-else class="icon-style" src="@/assets/images/todo_icon_01.png" />
          </template>
          <template
            #mainTextRight
            v-if="
              scope.row.rejectNum &&
              scope.row.rejectNum > 0 &&
              searchForm.status === TodoTaskStatusEnum.PENDING
            "
          >
            <el-tag class="g-ml4" type="danger">已驳回</el-tag>
          </template>
        </CTableColumn>
      </template>
      <template #currentTaskNameSlot="{ scope }">
        <el-tag type="info">{{ scope.row.currentTaskName }}</el-tag>
      </template>
      <template #taskEndNameSlot="{ scope }">
        <el-tag type="info">{{ scope.row.taskEndName }}</el-tag>
      </template>
      <template #startUserSlot="{ scope }">
        <CTableColumn
          :main-text="scope.row.startUser"
          :sub-text="scope.row.startTime"
        ></CTableColumn>
      </template>
    </CPageTable>
  </div>
</template>
<script lang="ts">
export default {
  name: 'TodoList'
};
</script>
<script lang="ts" setup>
import { reactive, watch } from 'vue';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { CTableColumn } from '@/components/CTable';
import { useTodoList } from './useTodoList';
import { ITaskResult } from '@/apis/todo/model/flowModel';
import { useRouter } from 'vue-router';
import { TodoTaskStatusEnum } from '@/constants/enum';
import { useKeepAliveRefresh } from '@/hooks/useKeepAliveRefresh';

const {
  searchOptions,
  searchForm,
  tableOptions,
  tableFieldsSetting,
  tableFieldsSetting2,
  tableFieldsSettingDue
} = useTodoList(handleUpdate);

const options = reactive<CPageTableProps>({
  title: '待办中心',
  searchOptions: searchOptions,
  tableOptions,
  tableFieldsSetting,
  isShowSearchBar: false,
  isContentScroll: true
});

const [registerPage, { refresh, updateTableFieldsSetting }] = useCPageTable(options);

useKeepAliveRefresh(refresh);

watch(
  () => searchForm.status,
  () => {
    sessionStorage.setItem('todoListType', searchForm.status);
  }
);

function handleUpdate() {
  if (searchForm.status === 'PROCESSED') {
    updateTableFieldsSetting(tableFieldsSetting2);
  } else if (searchForm.status === 'ABOUT_TO_EXPIRE' || searchForm.status === 'OUT_OF_TIME') {
    updateTableFieldsSetting(tableFieldsSettingDue);
  } else {
    updateTableFieldsSetting(tableFieldsSetting);
  }
}

const router = useRouter();
function handleClick(row: ITaskResult) {
  router.push(
    `/todo-list/detail?type=${searchForm.status}&id=${row.processInstanceId}${
      searchForm.status === TodoTaskStatusEnum.PENDING ? `&taskId=${row.currentTaskId}` : ''
    }`
  );
}
</script>
<style lang="scss" scoped>
.icon-style {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
</style>
